<template>
  <div class="box1">
    <div class="left">
      <el-checkbox v-model="bool" />
      <span v-html="bool ? '全不选' : '全选'"></span>
      <span>已办事项{{ count }}/全部事项{{ props.todos.length }}</span>
    </div>

    <div class="right">
      <el-button
        v-for="item in plain"
        type="primary"
        @click="updateTodo(item)"
        :plain="message !== item"
        >{{ item }}</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
const bool = ref(false)
const plain = ref(['已做', '未做', '全部'])
const message = ref('全部')
const props = defineProps({
  todos: {
    type: Array,
    required: true,
  },
})
const count = computed(() => {
  return props.todos.filter((item) => item.done).length
})

const updateTodo = (item) => {
  message.value = item
  if (item === '已做') {
    props.todos.forEach((e) => {
      e.done ? (e.isShow = true) : (e.isShow = false)
    })
  } else if (item === '未做') {
    props.todos.forEach((e) => {
      e.done ? (e.isShow = false) : (e.isShow = true)
    })
  } else {
    props.todos.forEach((e) => {
      e.isShow = true
    })
  }
}
watch(bool, () => {
  if (bool.value) {
    props.todos.forEach((e) => {
      e.done = true
    })
  } else {
    props.todos.forEach((e) => {
      e.done = false
    })
  }
})
onMounted(() => {
  if (localStorage.getItem('message')) {
    message.value = localStorage.getItem('message')
    updateTodo(message.value)
  }

  if (localStorage.getItem('bool') == 'true') {
    bool.value = true
    console.log(bool.value)
  } else {
    bool.value = false
  }
})

watch(message, () => {
  localStorage.setItem('message', message.value)
})

watch(bool, () => {
  localStorage.setItem('bool', bool.value)
})

// localStorage.clear()
</script>

<style scoped>
.box1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.right{
  font-size: 20px;
}
span {
  margin-left: 10px;
}
</style>
